<!-- 模板 -->
<template>
  <p>{{ name }}</p>
  <p>{{ info }}</p>
  <button @click="name='张三'">改变name的值张三</button>
  <button @click="info='周强'">可写计算属性的值周强</button>
  <button @click="change">可写计算属性的值周丽</button>
</template>

<!-- 脚本程序 -->
<script lang="ts" setup>
import {ref, computed} from "vue";

const name = ref('李四')

function change() {
  info.value = '周丽'
}

const info = computed({
  get() {
    return name.value
  },
  set(val) {
    name.value = val
  }
})
</script>


<!-- sass 样式，scoped 本组件使用 -->
<!-- npm install sass-loader sass --save-dev -->
<style lang="scss" scoped>

</style>
